<template>
<div class="asleft">
<div class=" row">
 		<div class="col-md-12">
	<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="../../assets/lunbo/lun1.jpg" class="img"/>
        </div>
        <div class="swiper-slide">
             <img src="../../assets/lunbo/lun2.jpg" class="img"/>
        </div>
        <div class="swiper-slide">
             <img src="../../assets/lunbo/lun3.jpg" class="img"/>
        </div>
         <div class="swiper-slide">
             <img src="../../assets/lunbo/lun4.jpg" class="img"/>
        </div>
         <div class="swiper-slide">
             <img src="../../assets/lunbo/lun5.jpg" class="img"/>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
    
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
    </div>
		</div>
</div>
  <hr/>
<div class="row">

    <div class="col-md-9">
       <h5 class="h5"><strong>精品分类</strong></h5>
    </div>
    <div class="col-md-3"><a class="astyle"><i class="iconfont" style="margin: 5px;">&#xe601;</i>全部分类</a></div>
</div>

<hr/>
			<div class="row card">			
				<div class="col-lg-3 col-md-6">
					<!-- 卡片 card -->
					<div class="card mb-4">
						<!-- 展示的图片 -->
						<img src="../../assets/card/go.jpg" class="card-img-top imgcrad" >
						<!-- 下方的介绍 -->
						<!-- <div class="card-body">
							<h5>card title</h5>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="btn btn-outline-secondary">Read More</a>
						</div> -->
            <a href="#" class="astyle">Read More</a>
					</div>
				</div>
				
				<div class="col-lg-3 col-md-6">
					<!-- 卡片 card -->
					<div class="card mb-4">
						<!-- 展示的图片 -->
						<img src="../../assets/card/java.jpg" class="card-img-top imgcrad" >
						<!-- 下方的介绍 -->
						<!-- <div class="card-body">
							<h5>card title</h5>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="btn btn-outline-secondary">Read More</a>
						</div> -->
            <a href="#" class="astyle">Read More</a>
					</div>
				</div>
				
				<div class="col-lg-3 col-md-6">
					<!-- 卡片 card -->
					<div class="card mb-4">
						<!-- 展示的图片 -->
						<img src="../../assets/card/mysql.jpg" class="card-img-top imgcrad" >
						<!-- 下方的介绍 -->
						<!-- <div class="card-body">
							<h5>card title</h5>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="btn btn-outline-secondary">Read More</a>
						</div> -->
            <a href="#" class="astyle">Read More</a>
					</div>
				</div>
				
				<div class="col-lg-3 col-md-6">
					<!-- 卡片 card -->
					<div class="card mb-4">
						<!-- 展示的图片 -->
						<img src="../../assets/card/redis.jpg" class="card-img-top imgcrad" >
						<!-- 下方的介绍 -->
						<!-- <div class="card-body">
							<h5>card title</h5>
							<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
							<a href="#" class="btn btn-outline-secondary">Read More</a>
						</div> -->
            <a href="#" class="astyle">Read More</a>
					</div>
				</div>
			</div>

      <hr/>
      <div class="row">
        <div class="col-md-9">
       <h5 class="h5"><strong>最新文章</strong></h5>
    </div>
      </div>

      <hr/>
      <!-- 文章列表 -->
      <div class="row">
        <div class="col-md-4">
          <img src="../../assets/card/go.jpg" class="imgarticle"/>
        </div>
        <div class="col-md-8 ">
          <h4><a class="title">Go语言学习</a></h4>
          <p class="text">博客分为两部分，第一部分为Go学习路线的思维导图，第二部分为思维导图对应的每个部分的讲解文章以及视频（持续更新）</p>
          <br/>
          <br/>
          <br/>
          <p class="text">2022-8-20 /<i class="iconfont icoi">&#xe602;</i>116 /<i class="iconfont icoi">&#xe69f;</i> 0 /<i class="iconfont icoi">&#xec7f;</i> 6</p>
        </div>
      </div>
      <hr/>
            <div class="row">
        <div class="col-md-4">
          <img src="../../assets/card/go.jpg" class="imgarticle"/>
        </div>
        <div class="col-md-8">
          <h4><a class="title">Go语言学习</a></h4>
          <p class="text">博客分为两部分，第一部分为Go学习路线的思维导图，第二部分为思维导图对应的每个部分的讲解文章以及视频（持续更新）</p>
          <br/>
          <br/>
          <br/>
          <p class="text">2022-8-20 /<i class="iconfont icoi">&#xe602;</i>116 /<i class="iconfont icoi">&#xe69f;</i> 0 /<i class="iconfont icoi">&#xec7f;</i> 6</p>
        </div>
      </div>
      <hr/>
            <div class="row">
        <div class="col-md-4">
          <img src="../../assets/card/go.jpg" class="imgarticle"/>
        </div>
        <div class="col-md-8">
          <h4><a class="title">Go语言学习</a></h4>
          <p class="text">博客分为两部分，第一部分为Go学习路线的思维导图，第二部分为思维导图对应的每个部分的讲解文章以及视频（持续更新）</p>
          <br/>
          <br/>
          <br/>
          <p class="text">2022-8-20 /<i class="iconfont icoi">&#xe602;</i>116 /<i class="iconfont icoi">&#xe69f;</i> 0 /<i class="iconfont icoi">&#xec7f;</i> 6</p>
        </div>
      </div>
      <hr/>
            <div class="row">
        <div class="col-md-4">
          <img src="../../assets/card/go.jpg" class="imgarticle"/>
        </div>
        <div class="col-md-8">
          <h4><a class="title">Go语言学习</a></h4>
          <p class="text">博客分为两部分，第一部分为Go学习路线的思维导图，第二部分为思维导图对应的每个部分的讲解文章以及视频（持续更新）</p>
          <br/>
          <br/>
          <br/>
          <p class="text">2022-8-20 /<i class="iconfont icoi">&#xe602;</i>116 /<i class="iconfont icoi">&#xe69f;</i> 0 /<i class="iconfont icoi">&#xec7f;</i> 6</p>
        </div>
      </div>
      <hr/>
            <div class="row">
        <div class="col-md-4">
          <img src="../../assets/card/go.jpg" class="imgarticle"/>
        </div>
        <div class="col-md-8">
          <h4><a class="title">Go语言学习</a></h4>
          <p class="text">博客分为两部分，第一部分为Go学习路线的思维导图，第二部分为思维导图对应的每个部分的讲解文章以及视频（持续更新）</p>
          <br/>
          <br/>
          <br/>
          <p class="text">2022-8-20 /<i class="iconfont icoi">&#xe602;</i>116 /<i class="iconfont icoi">&#xe69f;</i> 0 /<i class="iconfont icoi">&#xec7f;</i> 6</p>
        </div>
      </div>
      <hr/>
            <div class="row">
        <div class="col-md-4">
          <img src="../../assets/card/go.jpg" class="imgarticle"/>
        </div>
        <div class="col-md-8">
          <h4><a class="title">Go语言学习</a></h4>
          <p class="text">博客分为两部分，第一部分为Go学习路线的思维导图，第二部分为思维导图对应的每个部分的讲解文章以及视频（持续更新）</p>
          <br/>
          <br/>
          <br/>
          <p class="text">2022-8-20 /<i class="iconfont icoi">&#xe602;</i>116 /<i class="iconfont icoi">&#xe69f;</i> 0 /<i class="iconfont icoi">&#xec7f;</i> 6</p>
        </div>
      </div>
      <hr/>
            <div class="row">
        <div class="col-md-4">
          <img src="../../assets/card/go.jpg" class="imgarticle"/>
        </div>
        <div class="col-md-8">
          <h4><a class="title">Go语言学习</a></h4>
          <p class="text">博客分为两部分，第一部分为Go学习路线的思维导图，第二部分为思维导图对应的每个部分的讲解文章以及视频（持续更新）</p>
          <br/>
          <br/>
          <br/>
          <p class="text">2022-8-20 /<i class="iconfont icoi">&#xe602;</i>116 /<i class="iconfont icoi">&#xe69f;</i> 0 /<i class="iconfont icoi">&#xec7f;</i> 6</p>
        </div>
      </div>
      <hr/>
<!-- 文章列表结束 -->
</div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.min.css"
export default{
    name:'Navigation',
    mounted(){
      //swiper
    new Swiper ('.swiper-container', {
    //direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
    effect: 'cube',
    autoplay: {
    delay: 4000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },
    //
  })        
    },
}
</script>
<style scoped>
.asleft{
   border: 1px solid #fff;
   background-color: #fff;
   margin: 30px 0px 0px 0px;
   width: auto;
   height: auto;
   border-radius: 10px;
}
.img{
    margin: 10px 10px 10px 10px;
    width: 95%;
    height: 100%;
    border-radius:10px;
}
.swiper-container {
    width: 90%;
    height: 90%;
} 
 .swiper-container{
    --swiper-pagination-color: #fb6c2c;/* 两种都可以 */
  }
  .h5{
    color: #EBA948;
    margin: 10px;
  }
.astyle{
  text-decoration: none;
  color: #CCCCCC;
  margin: 30px 30px 30px 30px;
}
.astyle:hover{
  color: #fb6c2c;
}
.imgcrad{
  width: 160px;
  height: 150px;
  border-radius: 10px;
}

.card{
  height: auto;
  width: 100%;
  margin: 1px;
}
.imgarticle{
   width: 230px;
  height: 170px;
  border-radius: 10px;
  margin: 0px 5px 10px 5px;
}
.title{
  text-decoration: none;
  color: #000;

}
.title:hover{
  color: #fb6c2c;
}
.text{
  color: #CCCCCC;
}
.icoi{
  margin: 0px 2px 0px 2px;
}
</style>
